<!DOCTYPE html>
<html lang="en"><head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Plotter demo</title>
        <link rel="stylesheet" href="demo.css" type="text/css" media="screen">
        <script src="lib/raphael.js"></script>
        <script src="lib/popup.js"></script>
        <script src="lib/jquery.js"></script>
        <script src="plotter.js"></script>
        <style type="text/css" media="screen">
            body {
                background: #000;
            }
            #holder {
                height: 250px;
                margin: -125px 0 0 -400px;
                width: 800px;
            }
        </style>
		
		<script type="text/javascript">
		function Fld(id){
			var fld = document.getElementById(id);
			if(!fld) throw "No field '"+id+"'";
			return fld.value;
		}
		function update(){
			document.getElementById("holder").innerHTML = "";
			
			var plt = new Plotter("holder", 
				//0, 3, 0.2
				parseFloat(Fld("fX0")),
				parseFloat(Fld("fX1")),
				parseFloat(Fld("fS"))
			);
			plt.Func = new Function("x", "return "+Fld("fF"));
			plt.draw();
		}
		$(function(){update();});
		</script>
    </head>
    <body>
		<table border="0">
			<tr><th>xMin</th><td><input type="text" id="fX0" value="-3"/></td></tr>
			<tr><th>xMax</th><td><input type="text" id="fX1" value="3"/></td></tr>
			<tr><th>Step</th><td><input type="text" id="fS" value="0.2"/></td></tr>
			<tr><th>F(x)</th><td><input type="text" id="fF" value="Math.exp(-x*x)"/></td></tr>
			<tr><td colspan="2" align="center"><input type="button" value="Draw" onclick="update()"/></td></tr>
		</table>
        <div id="holder"></div>
    </body>
</html>